<template>
  <view class="category-container">
    <view class="header">
      <text class="title">分类</text>
    </view>
    
    <view class="category-content">
      <scroll-view class="sidebar" scroll-y>
        <view 
          v-for="(item, index) in categories" 
          :key="index"
          :class="['sidebar-item', currentCategory === index ? 'active' : '']"
          @tap="switchCategory(index)"
        >
          <text>{{ item.name }}</text>
        </view>
      </scroll-view>
      
      <scroll-view class="main-content" scroll-y>
        <view class="category-grid">
          <view 
            v-for="(item, index) in subCategories" 
            :key="index" 
            class="grid-item"
          >
            <image class="item-image" src="/static/placeholder.png" mode="aspectFill"></image>
            <text class="item-name">{{ item }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const currentCategory = ref(0)
const categories = ref([
  { name: '热门推荐', subCategories: ['推荐分类1', '推荐分类2', '推荐分类3'] },
  { name: '手机数码', subCategories: ['手机', '平板', '笔记本'] },
  { name: '家用电器', subCategories: ['电视', '空调', '冰箱'] },
  { name: '服装鞋包', subCategories: ['女装', '男装', '童装'] },
  { name: '美妆护肤', subCategories: ['面部护理', '彩妆', '香水'] }
])

const subCategories = ref(categories.value[0].subCategories)

const switchCategory = (index: number) => {
  currentCategory.value = index
  subCategories.value = categories.value[index].subCategories
}
</script>

<style lang="scss">
.category-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;
}

.header {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1rpx solid #eee;
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

.category-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 200rpx;
  height: 100%;
  background-color: #f6f6f6;
  
  .sidebar-item {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #333;
    position: relative;
    
    &.active {
      background-color: #ffffff;
      color: #007AFF;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 36rpx;
        background-color: #007AFF;
      }
    }
  }
}

.main-content {
  flex: 1;
  height: 100%;
  padding: 20rpx;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  
  .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .item-image {
      width: 140rpx;
      height: 140rpx;
      border-radius: 10rpx;
    }
    
    .item-name {
      margin-top: 10rpx;
      font-size: 24rpx;
      color: #333;
    }
  }
}
</style> 